<template>
	<view>
		<image class="activity_img" mode="aspectFill" src="https://img2.baidu.com/it/u=4134404395,864195599&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"></image>
		<view class="article_title">向共和国的蓝天卫士致敬，一声声我是中国空军安全感拉满</view>
		<view class="article_des">
			<view class="_popular">
				<i class="iconfont icon-renqi"></i>
				<text>350</text>
			</view>
			<view>
				<u-button open-type="share" shape="circle" icon="share-fill" :customStyle="shareStyle">分享</u-button>
			</view>
		</view>
		<view class="article_content">
			<u-parse :content="articleContent.content"></u-parse>
		</view>
		
		<view class="activity_footer">
			<view class="_btn" @click="routeApply">报名</view>
			<!-- <u-button type="primary" @click="routeApply">报名</u-button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articleContent: {
					title: '',
					content: `
						<p>露从今夜白，月是故乡明</p>
						<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					`
				},
				shareStyle: {
					backgroundColor: "rgba(255,255,255,0)",
					border: 'none'
				}
			}
		},
		methods: {
			// 调用加载详情方法
			
			// 跳转报名页面
			routeApply() {
				uni.navigateTo({
					url: "/pages/activity/apply"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.activity_img{
		display: block;
		width: 100%;
		height: 500rpx;
	}
	.article_title{
		padding: 30rpx;
		font-size: 36rpx;
		font-weight: bold;
	}
	.article_des{
		padding: 0 30rpx 30rpx 30rpx;
		color: #999;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		._popular{
			display: flex;
			align-items: center;
			flex: 1;
		}
		.icon-fenxiang{
			font-size: 34rpx;
		}
	}
	.activity_footer{
		padding: 30rpx;
		display: flex;
		justify-content: center;
		._btn{
			width: 450rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 50rpx;
			border: 1px solid #666;
			font-size: 34rpx;
		}
	}
</style>